<template>
	<div
		:class="['chart-card',cardType]"
		:size-x="sizeX"
		:size-y="sizeY"
		:row="row"
		:col="col"
		:id="cardType+'_chart_card_'+idx"
	>
		<div class="chart-card-header">
			<span>{{ title }}</span>
			<span>
				<md-button class="md-icon-button">
					<i class="iconfont iconPencil"></i>
				</md-button>
				<md-button class="md-icon-button">
					<i class="iconfont iconshanchu"></i>
				</md-button>
			</span>
		</div>
		<div class="chart-card-content" :id="cardType+'_chart_'+idx"></div>
	</div>
</template>
<script>
	import echarts from "echarts";
	import "echarts-wordcloud";
	export default {
		name: "ChartCard",
		props: {
			cardType: {
				type: String,
				default: ""
			},
			title: {
				type: String,
				default: ""
			},
			option: {
				type: String,
				default: ""
			},
			sizeX: {
				type: Number,
				default: 2
			},
			sizeY: {
				type: Number,
				default: 2
			},
			col: { type: Number, default: 0 },
			row: { type: Number, default: 0 },
			idx: {
				type: Number,
				default: 0
			},
			mapType: {
				type: String,
				default: "line"
			},
			mapName: {
				type: String,
				default: ""
			},
			mapJson: {
				type: Object,
				default: function() {
					return {};
				}
			},
			baseH: {
				type: Number,
				default: 0
			},
			baseW: {
				type: Number,
				default: 0
			},
			baseL: {
				type: Number,
				default: 0
			},
			baseT: {
				type: Number,
				default: 0
			}
		},
		watch: {
			baseH() {
				this.resizeCard();
			},
			baseW(){
				this.resizeCard();
			},
			baseL(){
				this.moveCard();
			},
			baseT(){
				this.moveCard();
			}
		},
		data: () => ({
			charts: null
		}),
		methods: {
			createMap(id, option, tag, geoJson) {
				echarts.registerMap(tag, geoJson);
				this.charts = echarts.init(document.getElementById(id));
				this.charts.setOption(option);
			},
			createChart(id, option) {
				this.charts = echarts.init(document.getElementById(id));
				this.charts.setOption(option);
			},
			initChart() {
				this.resizeCard();
				this.moveCard();
				var chartName = this.cardType + "_chart_" + this.idx;

				if (this.mapType == "map") {
					this.createMap(chartName, JSON.parse(this.option), mapName, mapJson);
				} else {
					this.createChart(chartName, JSON.parse(this.option));
				}
				var that = this;
				document.getElementsByTagName("body")[0].onresize = function() {
					that.charts.resize(
						that.charts.getDom().offsetWidth,
						that.charts.getDom().offsetHeight
					);
				};
			},
			resizeCard() {
				// var chart = this.cardType + "_chart_card_" + this.idx;
				// document.getElementById(chart).style.height = this.baseH + "px";
				// document.getElementById(chart).style.width = this.baseW + "px";
			},
			moveCard() {
				// var chart = this.cardType + "_chart_card_" + this.idx;
				// document.getElementById(chart).style.left =
				// 	this.baseL + this.baseW * (this.col - 1) + "px";
				// document.getElementById(chart).style.top =
				// 	this.baseT + this.baseH * (this.row - 1) + "px";
			}
		},
		mounted() {
			this.initChart();
		}
	};
</script>



